<template>
	<view class="content u-skeleton">
		<!-- 骨架屏 -->
		<Skeleton el-color="#efefef" bg-color="#fff" :loading="loading && isFirstComeIn" :animation="true"></Skeleton>
		<!-- 我的 -->
		<!-- <view class="top-bg" :src="`${VUE_APP_STATIC_URL}static/img/user/topBg.png`"></view> -->
		<view class="page-content">
			<!-- 用户未登录 -->
			<view class="user-info-box" @click="jumpLogin" v-if="userItem.name===undefined ">
				<image class="user-image u-skeleton-circle"
					:src="`${VUE_APP_STATIC_URL}static/img/user/default_head_img.png?v1.0.0`" mode="widthFix"></image>
				<view class="user-info">
					<view class="user-logoin-title">
						<text class="u-skeleton-rect">点击登录</text>
					</view>
					<view class="user-logoin-lable">
						<text class="u-skeleton-rect">登录后享受更多权益~</text>
					</view>
				</view>
				<view class="notice u-skeleton-circle">
					<view class="messNum" v-if="userItem.notRead>0">{{ userItem.notRead }}
					</view>
				</view>
			</view>
			<!-- 用户已登陆 -->
			<view class="user-info-box" v-else>
				<image class="user-image u-skeleton-circle"
					@click="handleJump('../../../pages_category_page2/userModule/personalDetails')"
					v-if="userItem.headImage" :src="userItem.headImage" mode="widthFix" style="border-radius: 50%;">
				</image>
				<image class="user-image u-skeleton-circle"
					@click="handleJump('../../../pages_category_page2/userModule/personalDetails')" v-else
					:src="`${VUE_APP_STATIC_URL}static/img/user/default_head_img.png`" mode="widthFix">
				</image>
				<view class="user-info">
					<view class="user-logoin-title"
						@click="handleJump('../../../pages_category_page2/userModule/personalDetails')"
						v-if="userItem.name">{{ userItem.name }}
					</view>
					<view class="experience" @click="handleJump('../../../pages_category_page2/userModule/auth')">
						<label class="label">{{userItem.authed?'已认证':'去认证'}}</label>
						<img class="img" :src="`${VUE_APP_STATIC_URL}static/img/user/user_auth.png`" />
					</view>
				</view>

				<view class="user-info-right"
					@click="handleJump('../../../pages_category_page2/userModule/personalDetails')">
					<label class="label">编辑资料</label>
					<image class="img" :src="`${VUE_APP_STATIC_URL}static/img/user/back-black.png`"></image>
				</view>

				<view class="notice u-skeleton-circle"
					@click="handleJump('../../../pages_category_page2/notice/index')">
					<view class="messNum" v-if="userItem.notRead+userItem.unreadReply>0">
						{{ userItem.notRead + userItem.unreadReply > 99 ? '99+' : userItem.notRead + userItem.unreadReply }}
					</view>
				</view>
			</view>

			<!-- 			<view class="account-box">
				<view class="account-item" v-for="orderCardItem in accountListRef" :key="orderCardItem.key"
					@click="handleJump(orderCardItem.jumpUrl)">
					<view class="account-item-value  u-skeleton-circle" :src="orderCardItem.icon" mode="widthFix">
						{{orderCardItem.value||0}}
					</view>
					<view class="account-item-text u-skeleton-rect">{{ orderCardItem.label }}</view>
					<!-- 		<view class="quan" v-if="userItem[orderCardItem.key]>0">
						{{ userItem[orderCardItem.key] }}
					</view> 
				</view>
			</view> -->

			<view class="order-contain" @click="handleJump('../../../pages_category_page1/orderModule/index')">
				<view class="order-top">
					<view class="order-title">我的订单</view>
					<view class="order-more">查看全部订单 ></view>
				</view>

				<!-- 订单卡片 -->
				<view class="order-box">
					<view class="order-item" v-for="orderCardItem in orderCardListRef" :key="orderCardItem.id"
						@click="handleJump(orderCardItem.jumpUrl)">
						<image class="order-item-image  u-skeleton-circle" :src="orderCardItem.icon" mode="widthFix">
						</image>
						<view class="order-item-text u-skeleton-rect">{{ orderCardItem.label }}</view>
						<view class="quan" v-if="userItem[orderCardItem.key]>0">
							{{ userItem[orderCardItem.key] }}
						</view>
					</view>
				</view>
			</view>

			<view class="coin-contain" @click="handleJump('../../../pages_category_page2/coin/index')">
				<img class="coin-bg" :src="`${VUE_APP_STATIC_URL}static/img/user/coin-bg.png?v1.0.4`"></img>
				<!-- <img class="coin-img" :src="`${VUE_APP_STATIC_URL}static/img/user/coin-logo.png`"></img> -->
				<view class="coin-title">{{coinName}}</view>
				<view class="coin-des">我的{{coinName}}：{{userItem.coin|0}}</view>
			</view>
			<view class="distributor-contain" @click="handleJump('../../../pages_category_page2/promotion/index')">
				<img class="distributor-img" :src="`${VUE_APP_STATIC_URL}static/img/user/fenxiao.png?v1.0.4`"></img>
				<view class="distributor-title">我的分享</view>
				<view class="distributor-des">我邀请的好友</view>
			</view>
			<!-- 第一个卡片 -->
			<view class="order-contain">
				<view class="order-top">
					<view class="order-title">我的权益</view>
				</view>
				<view class="itemBox">
					<view class="item-btn" v-for="item in fastCardOneListRef" :key="item.id"
						@click="handleJump(item.jumpUrl,item.needLogin)">
						<image class="item-btn-icon u-skeleton-circle" :src="item.icon" mode="widthFix">
						</image>
						<view class="item-btn-text u-skeleton-rect">{{ item.label }}</view>
					</view>
				</view>
			</view>
			<!-- 第二个卡片 -->
			<!-- 	<view class="itemBox">
				<view class="item-btn" v-for="item in fastCardTwoListRef" :key="item.id"
					@click="handleJump(item.jumpUrl)">
					<image class="item-btn-icon u-skeleton-circle" :src="item.icon" mode="widthFix"></image>
					<view class="item-btn-text u-skeleton-rect">{{ item.label }}</view>
				</view>
			</view> -->

			<!-- 邀请好友banner -->
			<view class="invite_banner" @click="handleShareSelect">
				<image class="invite_banner_img" :src="`${VUE_APP_STATIC_URL}static/img/user/invite_banner.jpg?v1.0.4`"
					mode="widthFix">
				</image>
			</view>
		</view>
		<view class="copyright">
			<text>{{copyright.company}} 版权所有</text>
			<text>{{copyright.icp}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		inject,
		nextTick
	} from 'vue';
	import Skeleton from "../../../components/Skeleton";
	import {
		fastCardOneList,
		fastCardTwoList,
		orderCardList,
		accountList
	} from "./index.data";
	import {
		Services
	} from '@/utils/services'
	// import { Encrypt } from '@/utils/secret'
	import {
		request
	} from "@/utils/request";
	import API from "../../../config/api";
	import {
		Encrypt
	} from "@/utils/secret";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";
	import {
		forIn
	} from 'lodash';
	import {
		jump
	} from '../../../utils/jumpUtil';

	const isFirstComeIn = ref(true);
	const loading = ref(true);
	const orderCardListRef = ref(orderCardList);
	const accountListRef = ref(accountList)
	const fastCardOneListRef = ref(fastCardOneList);
	const fastCardTwoListRef = ref(fastCardTwoList);
	const cacheUserItem = ref({});
	const userItem = ref({
		headImage: '',
		name: undefined
	});
	const $jump = inject('$jump')
	const $goBqCenter = inject('$goBqCenter')
	const $goExternalLink = inject('$goExternalLink')
	const copyright = ref({
		company: '',
		icp: ''
	})
	const coinName = ref('')
	const appName = ref('')
	onShow(() => {
		nextTick(() => {
			if (uni.getStorageSync('storage_key')) {
				cacheUserItem.value = uni.getStorageSync('storage_key');
				handleGetUser();
			} else {
				isFirstComeIn.value = true;
				loading.value = false;
			}
			appName.value = getApp().globalData.appName
			copyright.value = {
				company: getApp().globalData.copyright,
				icp: getApp().globalData.icp
			}
			coinName.value = getApp().globalData.coinName
		})
	})

	const handleJump = (url, needLogin) => {
		if (needLogin != false && !isLogin()) {
			jumpLogin();
			return true
		}
		if (url.startsWith('function')) {
			const [key, funcName] = url.split(':')
			functionObj[funcName]()
		} else {
			$jump(url)
		}
	}

	const handleGetUser = () => {
		loading.value = true
		request(API.GetUser, {}, 'GET').then(res => {
			cacheUserItem.value = res.data
			userItem.value = res.data
			uni.setStorageSync('storage_userInfo', userItem.value);
			isFirstComeIn.value = false
			loading.value = true
			forIn(accountListRef.value, it => {
				if (it.key === "credit") it.value = userItem.value.credit
				else if (it.key === "coin") it.value = userItem.value.coin
				else if (it.key === "contribute") it.value = userItem.value.contribute
			})
		})
	}

	const isLogin = () => {
		return !(JSON.stringify(cacheUserItem.value) === '{}' || userItem.value.name === undefined)
	}

	const jumpLogin = () => {
		uni.navigateTo({
			url: '../../../pages_category_page2/userModule/login'
		})
	}

	const checkLogin = () => {
		if (!isLogin()) {
			jumpLogin()
			return !1;
		}
		return 1
	}

	const flyToService = async () => {
		(await Services()).flyToService();
	}

	const handleBqCenter = () => {
		$goBqCenter()
	}

	const handleApplySettle = () => {
		const res = uni.getStorageSync('storage_key');
		let token = Encrypt(res.token)
		let username = userItem.value.name
		let url = API.SettledMerchantPrefix + '?username=' + username + '&user=' + token
		$goExternalLink(url)
	}

	const downloadApp = () => {
		$goExternalLink(API.appDownloadUrl)
	}

	// 分享信息对象
	const shareObj = ref({
		url: '',
		image: '',
		title: '好友分享了一个很棒的商品',
		actionList: [{
				text: '生成分享海报'
			},
			{
				text: '邀请好友'
			}
		],
		actionShow: false
	})

	/**
	 * 选择分享菜单后
	 * @param index
	 */
	function handleShareSelect() {
		uni.showLoading({
			mask: true,
			title: '请稍候...'
		})
		request(API.getAppSharePic, {
			terminal: getApp().globalData.terminal
		}, 'GET').then(res => {
			uni.hideLoading()
			if (!res.data.title) res.data.title = `【${appName.value}】好友邀请你一起来参与`
			jump(`/pages_category_page1/share/sharePic`,res.data)
		}).catch(err => {
			uni.hideLoading()
			throw Error(err)
		})
	}

	const functionObj = {
		handleApplySettle,
		flyToService,
		handleBqCenter,
		downloadApp,
	}
</script>

<style lang="scss">
	@import "../../../style/images";

	page {
		background: #fff;
	}

	.content {
		padding-top: calc(20rpx + var(--status-bar-height));
		background: linear-gradient(169.11deg, #F2C4B1 0%, rgba(249, 237, 232, 0) 78.29%);
		height: 100%;
		position: relative;
		padding-bottom: 150rpx;
		width: 100%;

		.itemBox {
			display: flex;
			flex-flow: wrap;
			padding-top: 30rpx;
			background: #FFFFFF;
			width: 690rpx;
			margin: 30rpx auto 0 auto;
			border-radius: 20rpx;
			box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1);
		}

		/* background-color: #f8f8f8; */
		.top-bg {
			width: 100%;
			height: 600rpx;
			margin-top: -20rpx;
			background-color: #FF3750;
		}

		.page-content {
			width: 100%;
			// height: 100%;
			display: flex;
			flex-direction: column;
			z-index: 10;

			.user-info-box {
				width: 100%;
				margin-top: 100rpx;
				box-sizing: border-box;
				padding: 30upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;

				.notice {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					/* #ifdef MP-WEIXIN */
					top: 0rpx;
					/* #endif */
					/* #ifndef MP-WEIXIN */
					top: -50rpx;
					/* #endif */
					right: 50rpx;
					background: $notice-black no-repeat center center;
					background-size: contain;

					.messNum {
						background: #C83732;
						border-radius: 50%;
						color: #FFFFFF;
						text-align: center;
						margin: 0rpx 0 0 30rpx;
						width: 30rpx;
						height: 30rpx;
						line-height: 30rpx;
						font-size: 20rpx;
					}
				}

				.user-image {
					width: 126rpx;
					height: 126rpx;
				}

				.user-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding-left: 20upx;
					box-sizing: border-box;
					z-index: 10;

					.user-logoin-title {
						font-size: 40upx;
						font-weight: 600;
						color: rgba(0, 0, 0, 1);
					}

					.user-logoin-lable {
						font-size: 24upx;
						font-weight: 400;
						color: #666666;
						margin-top: 20upx;
					}

					.experience {
						align-items: center;
						vertical-align: middle;
						margin-top: 10rpx;

						.label {
							font-size: 24rpx;
							color: #F3641E;
						}

						.img {
							margin-left: 6rpx;
							width: 32rpx;
							height: 32rpx;
						}

						.experienceValue {
							width: auto;
							padding: 0 28rpx;
							height: 40rpx;
							font-weight: 400;
							color: #FFFFFF;
							border-radius: 25rpx;
							line-height: 40rpx;
							border: 2rpx solid rgba(0, 0, 0, 0);
							background: linear-gradient(88deg, #C5AA7B 0%, #F5DEB2 100%);
							font-size: 20rpx;
							margin-left: 20rpx;
						}
					}
				}

				.user-info-right {
					display: flex;
					flex-direction: row;
					align-items: center;
					vertical-align: middle;

					.label {
						font-size: 20rpx;
						color: #666666;
					}

					.img {
						width: 30upx;
						height: 30upx;
					}
				}
			}

			.account-box {
				width: 100%;
				height: 196upx !important;
				background: rgba(255, 255, 255, 0);
				box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1);
				display: flex;
				flex-direction: row;
				align-items: center;
				z-index: 10;

				.account-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;


					.quan {
						position: absolute;
						right: 40upx;
						top: 10upx;
						border: 1px solid red;
						color: #FFFFFF;
						background-color: red;
						border-radius: 50%;
						font-size: 16rpx;
						width: 30upx;
						height: 30upx;
						line-height: 30upx;
						text-align: center;
					}

					.account-item-value {
						text-align: center;
						vertical-align: baseline;
						font-size: 30upx;
						color: rgb(255, 255, 255);
					}

					.account-item-text {
						font-size: 28upx;
						margin-top: 10upx;
						text-align: center;
						font-weight: 500;
						color: rgb(255, 255, 255);
					}
				}
			}

			.order-contain {
				width: 690rpx;
				margin: 30rpx auto 0 auto;
				margin-right: 28rpx;
				margin-left: 28rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 20rpx;
				box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1);

				.order-top {
					width: 100%;
					margin-top: 20upx;
					margin-right: 20upx;
					padding-right: 20upx;
					margin-left: 20upx;
					height: 56upx !important;
					display: flex;
					flex-direction: row;
					align-items: center;
					vertical-align: bottom;

					.order-title {
						font-size: 32rpx;
						font-weight: 800;
					}

					.order-more {
						display: none;
						flex: 1;
						font-size: 24rpx;
						font-weight: 400;
						color: #B3B2B2;
						margin-right: 20upx;
						text-align: right;
					}
				}

				.order-box {
					width: 100%;
					height: 196upx !important;
					display: flex;
					flex-direction: row;
					align-items: center;

					.order-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						position: relative;

						.quan {
							position: absolute;
							right: 40upx;
							top: 10upx;
							border: 1px solid red;
							color: #FFFFFF;
							background-color: red;
							border-radius: 50%;
							font-size: 16rpx;
							width: 30upx;
							height: 30upx;
							line-height: 30upx;
							text-align: center;
						}

						.order-item-image {
							width: 96upx;
							height: 96upx;
						}

						.order-item-text {
							font-size: 28upx;
							font-weight: 500;
							color: #000;
						}
					}
				}
			}

			.coin-contain {
				width: 690rpx;
				height: 190rpx;
				margin: 30rpx auto 0 auto;
				margin-right: 28rpx;
				margin-left: 28rpx;
				background: linear-gradient(141.7deg, #FD974F 6.17%, #FFB058 36.31%, #FFC780 93.6%);
				border-radius: 20rpx;
				box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1);
				position: relative;

				.coin-bg {
					width: 100%;
					height: 100%;
				}

				.coin-img {
					vertical-align: middle;
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					top: 45rpx;
					left: 45rpx;
				}

				.coin-title {
					font-size: 32rpx;
					font-weight: 800;
					color: #FFFFFF;
					position: absolute;
					top: 60rpx;
					left: 50rpx;
				}


				.coin-des {
					font-size: 28rpx;
					color: #FFFFFF;
					position: absolute;
					top: 110rpx;
					left: 50rpx;
				}
			}

			.distributor-contain {
				width: 690rpx;
				height: 190rpx;
				margin: 30rpx auto 0 auto;
				margin-right: 28rpx;
				margin-left: 28rpx;
				background: linear-gradient(145.41deg, #FFF6F0 4.23%, #F8E2D3 97.72%);
				border-radius: 20rpx;
				box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1);
				position: relative;


				.distributor-img {
					vertical-align: middle;
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					top: 45rpx;
					left: 45rpx;
				}

				.distributor-title {
					font-size: 32rpx;
					font-weight: 800;
					color: #D64E45;
					position: absolute;
					left: 156rpx;
					top: 60rpx;
				}

				.distributor-des {
					font-size: 28rpx;
					color: #D64E45;
					font-weight: 400;
					position: absolute;
					left: 156rpx;
					top: 110rpx;
				}
			}

			.invite_banner {
				width: 690rpx;
				margin: 30rpx auto 0 auto;

				.invite_banner_img {
					width: 100%;
					background-size: contain !important;
					background-repeat: no-repeat !important;
				}
			}

			.item-btn {
				width: 25%;
				box-sizing: border-box;
				background-color: #fff;
				text-align: center;
				margin-bottom: 40rpx;

				.item-btn-icon {
					width: 68upx;
					height: 68upx !important;
					display: block;
					margin: 0 auto;
				}

				.item-btn-text {
					font-size: 24upx;
					font-weight: 400;
					flex: 1;
					color: #666666;
					display: inline-block;
					min-width: 120rpx;
					margin-top: 10rpx;
				}

				.messNum {
					margin-left: 10rpx;
					font-size: 16rpx;
					background-color: red;
					color: #FFFFFF;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					margin-top: -5rpx;
					line-height: 30rpx;
					text-align: center;
				}

				.item-btn-right {
					width: 24upx;
					height: 24upx;
				}

			}

			.btnNone {
				margin: 0;
				padding: 0;
				line-height: normal;

				&::after {
					display: none;
				}
			}

			.mt20 {
				margin-top: 20upx;
			}

			.mt1 {
				margin-top: 1upx;
			}
		}

		.copyright {
			text-align: center;
			padding: 30rpx 0 20rpx;
			bottom: 0;
			left: 0;
			width: 100%;

			text {
				display: block;
				font-size: 20rpx;
				line-height: 30rpx;
				color: #C5CACF;
			}
		}
	}
</style>